<template>
    <div class="rigister">
        <div class="left_img hidden-sm-and-down">
            <span class="leftname">XXX</span>
            <span>游爱说内容管理系统</span>
            <span class="introduce">
                更加轻量化，更快捷，多设备支持的轻量级内容管理系统
            </span>
        </div>
        <div class="right_rigister">
            <div class="title">
                <div class="welcome">欢迎使用内容管理系统</div>
                <div class="line">
                    <div class="Account">
                        账号：
                        <el-input v-model="input" style=" width: 60%;height: 4vh;" placeholder="请输入账号" clearable />
                        <span v-if="getmyinput">请输入账号，长度为x-x位</span>
                    </div>
                    <div class="Password">
                        密码：
                        <el-input v-model="password1" style="width: 60%;height: 4vh;" type="password"
                            placeholder="请输入密码" show-password />
                        <span v-if="getmypassword1">请输入密码，长度为x-x位</span>
                    </div>
                    <div class="Password">
                        再次输入密码：
                        <el-input v-model="password2" style="width: 48%;height: 4vh;" type="password"
                            placeholder="请再次输入密码" show-password />
                        <span v-if="getmypassword2">请再次输入密码，长度为x-x位</span>
                    </div>
                    <button class="login_btn" @click="rigister">注册</button>
                    <span @click="tologin" class="tologin">已有账号？去登录</span>
                </div>

            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import 'element-plus/theme-chalk/display.css'
import { ref } from 'vue'
import { useRouter } from 'vue-router';
// import { ElMessage } from 'element-plus'
// 调用接口，利用POST方法传到数据库中
// 导入api
// import signin from '../api/index'

const router = useRouter()
// 获取账号、密码
const input = ref('')
const password1 = ref('')
const password2 = ref('')


const getmyinput = ref(false)
const getmypassword1 = ref(false)
const getmypassword2 = ref(false)

// input.value 账号
// password2.value 密码

// const signin = async () => {

// }

function rigister() {
    // 是否完整的输入以及选中
    console.log(input.value, password1.value);
    if (!input.value) {
        getmyinput.value = true;
    }
    else {
        getmyinput.value = false;
    }
    if (!password1.value) {
        getmypassword1.value = true;
    }
    else {
        getmypassword1.value = false;
    }
    if (!password2.value) {
        getmypassword2.value = true;
    }
    else {
        getmypassword2.value = false;
    }
    // 两次输入不一致
    if (password1.value != password2.value) {
        alert("两次输入的密码不一致");
        console.log("两次输入的密码不一致");
    }

    // 账号密码判断
    if (input.value && password1.value == password2.value && password1.value) {
        console.log('注册成功');
        alert("注册成功");
        // 上传到本地localStorage
        localStorage.setItem('username', input.value);
        localStorage.setItem('password', password1.value);
        // 读取本地localStorage
        console.log("username", localStorage.getItem('username'));
        console.log("password", localStorage.getItem('password'));
    } else {
        console.log('注册失败');
        alert("注册失败");
    }

}
function tologin() {
    router.push('/login');
}
</script>

<!-- 输入框 样式 -->
<style scoped>
.el-icon svg {
    height: 4vh;
    width: 3rem;
}
</style>

<style lang="scss">
@use "../common/scss/variable.scss";

.rigister {
    display: flex;
    background-image: url("../common/images/mybg.png");
    background-size: cover;
    background-repeat: no-repeat;
    color: #ffffff;

    .left_img {
        flex-grow: 1;
        height: 100vh;

        // background-color: $bgcolor;
        span {
            display: block;
            width: 100%;
            text-align: center;
            margin: auto;
            font-size: 2vw;
            opacity: 1;
        }

        .leftname {
            font-size: 3vw;
            margin-top: 12rem;
            margin-bottom: 2vh;
        }

        .introduce {
            margin-top: 5vh;
            font-size: 1.5vw;
            font-family: "黑体";
        }
    }

    .right_rigister {
        background-color: rgba(255, 255, 255, 0.3);
        flex-grow: 2;
        height: 100vh;
        font-size: 1rem;

        .title {
            margin: 0 auto;
            width: 90%;
            height: 60vh;
            background-color: rgba(255, 255, 255, 0.7);
            border-radius: 30px;
            top: 20%;
            position: relative;
            color: #000;
            text-align: center;

            .welcome {
                padding-top: 1rem;
                margin-bottom: 1rem;
                font-size: 1.3rem;
                position: relative;
                display: inline-block;
                text-align: center;
                font-size: 2vw;
            }

            .line {
                margin: 0 auto;
                width: 90%;

                .Account {
                    margin-top: 2rem;

                    span {
                        display: block;
                        color: rgb(255, 19, 19);
                    }
                }

                .Password {
                    margin: 1rem auto;

                    span {
                        display: block;
                        color: rgb(255, 19, 19);
                    }
                }

                .agreement {
                    margin-left: 1vw;
                    font-size: 1rem;

                    .check_span {
                        color: red;
                        display: block;
                    }
                }

                .login_btn {
                    margin: 1rem auto;
                    width: 70%;
                    height: 6vh;
                    border-radius: 10px;
                    background-color: $bgcolor;
                    font-size: 1.6vw;
                }

                .tologin {
                    display: block;
                }
            }
        }
    }
}
</style>